<template>
	<view class="myPages" :style="{paddingTop: `${search.top+search.height+10+52}px`}">
		<view class="myPages__mbox" :style="{height: `${search.top+search.height+10}px`}"></view>
		<myHeard :search="search" :isTrue="false" :title="title" @goPath="goBack"></myHeard>

		<view class="tabs" :style="{top:`${search.top+search.height+10}px`}">
			<block v-for="(item,index) in ['全部','待付款','待发货','待收货']" :key="index">
				<view class="tabsItems" @click.stop="changeTabs(index)">
					<view :class="tabIndex==index?'tab active':'tab'">{{item}}</view>
					<view :class="tabIndex==index?'tab_hen tab_hen--active':'tab_hen'"></view>
				</view>
			</block>
		</view>
		<view class="myPages__swperMain" v-if="orderList.length==0">
			<image class="kong" src="/static/images/oderkongIcon.png"></image>
		</view>
		<view class="myPages__swperMain" v-else>
			<view class="myPages__swperMainItems"
				@click.stop="goPath(`/package/orderAmount/index?orderNo=${item.orderNo}`)"
				v-for="(item,index) in orderList" :key="index">
				<view class="myPages__swperMainItemsHeard">
					<!-- 订单状态--待付款 -->
					<view class="myPages__swperMainItemsHeardLeft myPages__swperMainItemsHeardLeft--fk"
						v-if="item.orderStatus==20&&item.payStatus==10">
						<image src="/static/images/payIcon.png"></image>
						<span>待付款</span>
					</view>
					<!-- 订单状态--待发货(sendIcon)-->
					<view class="myPages__swperMainItemsHeardLeft myPages__swperMainItemsHeardLeft--geis"
						v-else-if="item.orderStatus==20&&item.payStatus==20&&item.deliveryStatus==10">
						<image src="/static/images/sendIcon.png"></image>
						<span>待发货</span>
					</view>
					<!-- 订单状态--待收货(wait2Icon)-->
					<view class="myPages__swperMainItemsHeardLeft myPages__swperMainItemsHeardLeft--geis"
						v-else-if="item.orderStatus==20&&item.payStatus==20&&item.deliveryStatus==30&&item.receiptStatus==10">
						<image src="/static/images/wait2Icon.png"></image>
						<span>待收货</span>
					</view>
					<!-- 订单状态--交易关闭-->
					<view class="myPages__swperMainItemsHeardLeft"
						v-else-if="(item.orderStatus==10&&item.payStatus==20)||(item.orderStatus==10&&item.payStatus==10)">
						<image src="/static/images/chaIcon.png"></image>
						<span>交易关闭</span>
					</view>
					<!-- 订单状态--已完成-->
					<view class="myPages__swperMainItemsHeardLeft" v-else>
						<image src="/static/images/yesIcon.png"></image>
						<span>已完成</span>
					</view>


					<view class="myPages__swperMainItemsHeardRight">订单编号：{{item.orderNo}}</view>
				</view>
				<view class="myPages__swperMainItemsBodys">
					<view class="myPages__swperMainItemsBodysItem" v-for="(twoItem,twoIndex) in item.orderProductList"
						:key="twoIndex">
						<view class="myPages__swperMainItemsBodysItemLeftBox">
							<image :class="twoItem.productType==20?'myPages__swperMainItemsBodysItemLeftBoxImg':'myPages__swperMainItemsBodysItemLeftBoxImgs'" :src="twoItem.productImg"></image>
						</view>
						<view class="myPages__swperMainItemsBodysItemRightBox">
							<p>{{twoItem.productName}}</p>
							<p>{{twoItem.productSku}}</p>
						</view>
					</view>
				</view>
				<view class="myPages__swperMainItemsEnd">
					<view class="myPages__swperMainItemsEndLeftBox">
						<p>共{{item.totalNum}}件商品</p>
						<p>{{item.createTime | ff_createTime}}</p>
					</view>
					<!-- 订单状态--待付款 -->
					<view class="myPages__swperMainItemsEndRightBox" v-if="item.orderStatus==20&&item.payStatus==10">
						<span @click.stop="goPath(`/package/orderAmount/index?orderNo=${item.orderNo}`)">查看详情</span>
						<span @click.stop="goPath(`/package/orderAmount/index?orderNo=${item.orderNo}`)">去支付</span>
					</view>
					<!-- 订单状态--待发货  -->
					<view class="myPages__swperMainItemsEndRightBox"
						v-else-if="(item.orderStatus==20&&item.payStatus==20&&item.deliveryStatus==10)">
						<span @click.stop="goPath(`/package/orderAmount/index?orderNo=${item.orderNo}`)">查看详情</span>
						<span v-if="item.serviceStatus==10" @click.stop="goAfterSaleDetails({
				orderProductList:item.orderProductList,
				orderId:item.orderId,
				orderStatus: item.orderStatus,
				payStatus: item.payStatus,
			})">申请售后</span>
					</view>
					<!-- 订单状态--待收货 -->
					<view class="myPages__swperMainItemsEndRightBox"
						v-else-if="item.orderStatus==20&&item.payStatus==20&&item.deliveryStatus==30&&item.receiptStatus==10">
						<span @click.stop="goPath(`/package/orderAmount/index?orderNo=${item.orderNo}`)">查看详情</span>
						<span @click.stop="goPath(`/package/orderAmount/index?orderNo=${item.orderNo}`)">确认收货</span>
					</view>
					<!-- 订单状态--交易关闭 -->
					<view class="myPages__swperMainItemsEndRightBox"
						v-else-if="(item.orderStatus==10&&item.payStatus==20)||(item.orderStatus==10&&item.payStatus==10)">
						<span @click.stop="reomve(item.orderNo,index)">删除订单</span>
						<span @click.stop="goBackRemark(item.orderNo)">重新购买</span>
					</view>
					<!-- 订单状态--已完成-->
					<view class="myPages__swperMainItemsEndRightBox" v-else>
						<span @click.stop="reomve(item.orderNo,index)">删除订单</span>
						<span @click.stop="goAfterSaleDetails({
				orderProductList:item.orderProductList,
				orderId:item.orderId,
				orderStatus: item.orderStatus,
				payStatus: item.payStatus,
			})">申请售后</span>
					</view>

				</view>
			</view>
		</view>
		<!-- 撤销订单-->
		<u-overlay :show="show" @click="show = false">
			<view  @click.stop="" class="warp">
				<view class="warpText">确认删除订单？</view>
				<view class="warpButtom">
					<span class="warpButtomQx" @click.stop="show = false">取消</span>
					<span class="warpButtomYes" @click.stop="ff_yes">确定</span>
				</view>
			</view>
		</u-overlay>
		<!-- 删除成功 -->
		<u-overlay :opacity="0.01" :show="isReovmShowDui">
			<view @click.stop="" class="overlayBox">
				<image src="/static/images/duiIcon.png"></image>
				<span>删除成功</span>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import myHeard from '@/components/myHeard/index.vue'
	export default {
		components: {
			myHeard
		},
		data() {
			return {
				title: '我的订单',
				reomveOrderNo: '',
				tabIndex: 0,
				orderList: [],
				pageNum: 1,
				pageSize: 5,
				show: false,
				isReovmShowDui: false,
				// 导航标志：all【全部】，unpay【待支付】，undelivery【待发货】，unreceipt【待收货】，uncomment【待评论】
				orderType: ['all', 'unpay', 'undelivery', 'unreceipt']
			}
		},
		onLoad(oprtion) {
			// #ifndef H5
			let search = uni.getMenuButtonBoundingClientRect()
			this.$store.commit('updataSearch', search);
			// #endif
			console.log(oprtion.index)
			this.tabIndex = oprtion.index;


		},
		onShow() {
			this.orderList = [];
			this.pageNum = 1;
			this.initOrderList();
		},
		onReachBottom() {
			this.pageNum++;
			this.initOrderList();
		},
		computed: {
			search() {
				return this.$store.state.search;
			}
		},
		filters: {
			ff_createTime(date) {
				date = new Date(date)
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				const day = date.getDate()
				const hour = date.getHours()
				const minute = date.getMinutes()
				const second = date.getSeconds()

				function formatNumber(n) {
					n = n.toString()
					return n[1] ? n : '0' + n
				}
				return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(
						formatNumber)
					.join(':')
			}
		},
		methods: {
			ff_yes() {
				
					uni.showLoading({
						title: '加载中',
							mask:true
					});
				this.$api.orderWxRemove({
					orderNo: this.reomveOrderNo
				}).then(res => {
					if (res.code == 200) {
						this.show = false;
						this.isReovmShowDui = true;
						setTimeout(()=>{
							this.isReovmShowDui = false;
							let nowOrderList = JSON.parse(JSON.stringify(this.orderList))
							nowOrderList.splice(this.reomveIndex, 1);
							this.orderList = JSON.parse(JSON.stringify(nowOrderList))
							
						},1000)
						
					
					}

				})
			},
			reomve(orderNo, index) {
				this.show = true;
				console.log(this.orderList.length)
				this.reomveOrderNo = orderNo;
				this.reomveIndex = index;
			},
			goAfterSaleDetails({
				orderProductList,
				orderId,
				orderStatus,
				payStatus
			}) {
				let sales = {};
				let orderProductIds = [];
				let isOrderProductIds = false;
				orderProductList.forEach(item => {
					if (item.serviceStatus == 0) {
						orderProductIds.push(item)
					}
				})
				for (let i = 0; i < orderProductList.length; i++) {
					let item = orderProductList[i];
					item.serviceStatus
					if (item.serviceStatus == 0) {
						isOrderProductIds = true
						break
					}
				}
				if (!isOrderProductIds) {
					uni.showToast({
						icon: 'none',
						title: '该订单已申请售后'
					})
					return
				}
				console.log('orderProductIds-->', orderProductIds)
				sales = {
					orderId,
					orderProductIds
				}

				uni.navigateTo({
					url: `/package/applySales/index?sales=${JSON.stringify(sales)}&orderStatus=${orderStatus}&payStatus=${payStatus}`
				})
			},
			goBackRemark(orderNo) {
				let req = {
					orderNo,
					buyType: 3
				}
				uni.navigateTo({
					url: `/package/orderForm/index?backObj=${JSON.stringify(req)}`
				})
			},
			goPath(url) {
				uni.navigateTo({
					url
				})
			},
			initOrderList() {
				let nav = this.orderType[this.tabIndex];
				
					uni.showLoading({
						title: '加载中',
							mask:true
					});
				this.$api.orderWxList(nav, {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}).then(res => {
					if (res.code == 200) {
						this.orderList = [...this.orderList, ...res.rows];
						console.log(this.orderList)
					}
				})
			},
			changeTabs(index) {
				this.tabIndex = index;
				this.orderList = [];
				this.pageNum = 1;
				this.initOrderList();
			},
			goBack() {
				uni.switchTab({
					url: '/pages/user/index'
				})
			}
		}
	}
	
</script>

<style scoped lang="scss">
	.myPages {
		min-height: 100vh;
		background-color: #F7F8FC;
		box-sizing: border-box;

		.myPages__mbox {
			background-color: #FFFFFF;
			width: 100%;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 1;
		}

		.myPages__swperMainItemsHeardRight {
			height: 34rpx;
			font-size: 24rpx;
			font-family: 'DIN';
			font-weight: 400;
			line-height: 34rpx;
			color: #B0B1BB;
		}

		.kong {
			width: 408rpx;
			height: 408rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.myPages__swperMain {
			width: 100%;
			padding: 32rpx;
			box-sizing: border-box;
		}

		.myPages__swperMainItems {
			width: 100%;
			box-sizing: border-box;
			padding: 32rpx;
			background-color: #FFFFFF;
			border-radius: 40rpx;
			margin-bottom: 30rpx;
		}

		.myPages__swperMainItemsHeard {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.overlayBox {
			width: 202rpx;
			height: 90rpx;
			background: rgba(0, 0, 0, 0.9);
			border-radius: 32px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			top: 48%;
			left: 50%;
			transform: translate(-50%, -50%);
		
			image {
				display: inline-block;
				width: 34rpx;
				height: 34rpx;
			}
		
			span {
				display: inline-block;
				height: 34rpx;
				font-size: 24rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				line-height: 34rpx;
				color: #FFFFFF;
				margin-left: 8rpx;
		
			}
		}

		.warp {
			width: 70%;
			height: 210rpx;
			text-align: center;
			border-radius: 40rpx;
			background-color: #FFFFFF;
			overflow: hidden;
			position: fixed;
			top: 40%;
			left: 50%;
			transform: translate(-50%);
		}

		.warpText {
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			color: #2B2B33;
			width: 100%;
			padding: 40rpx 0;
		}

		.warpButtom {
			display: flex;

			span {
				flex: 1;
				height: 90rpx;
				line-height: 90rpx;
				font-size: 28rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				color: #F0414D;
				border-top: 3rpx solid #F0F2F8;
				box-sizing: border-box;
			}

			span:nth-child(1) {
				border-right: 3rpx solid #F0F2F8;
				color: #B0B1BB;
			}
		}

		.myPages__swperMainItemsEndRightBox {
			span {
				width: 168rpx;
				font-size: 26rpx;
				font-family: 蘋方-簡;
				display: inline-block;
				height: 68rpx;
				line-height: 64rpx;
				border: 2rpx solid #f0414d;
				color: #f0414d;
				text-align: center;
				box-sizing: border-box;
				border-radius: 40rpx;
			}

			span:nth-child(2) {
				color: #FFFFFF;
				background-color: #f0414d;
				margin-left: 16rpx;
			}

		}

		.myPages__swperMainItemsEnd {
			height: 72rpx;
			display: flex;
			justify-content: space-between;
		}

		.myPages__swperMainItemsEndLeftBox {
			color: #B0B1BB;
			font-size: 24rpx;
			font-family: 'DIN';
			font-weight: 400;
		}

		.myPages__swperMainItemsBodys {
			padding: 16rpx 0;
		}

		.myPages__swperMainItemsBodysItem {
			display: flex;
			padding: 8rpx 0;
		}

		.myPages__swperMainItemsBodysItemLeftBox {
			width: 152rpx;
			flex: 0 0 152rpx;
			height: 152rpx;
			border-radius: 40rpx;
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #f9f8fd;


			image {
				width: 152rpx;
				height: 152rpx;
			}
		}
.myPages__swperMainItemsBodysItemLeftBoxImg{
	width: 92rpx !important;
	height: 92rpx !important;
}
.myPages__swperMainItemsBodysItemLeftBoxImgs{
	transform: scale(1.4);
}
		.myPages__swperMainItemsBodysItemRightBox {
			flex: 1;
			margin-left: 24rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;

			p {
				font-size: 28rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				color: #2B2B33;
			}

			p:nth-child(2) {
				font-size: 24rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				color: #7B7D8D;
			}
		}

		.myPages__swperMainItemsHeardLeft--fk {
			span {
				color: #F0414D !important;
			}

		}

		.myPages__swperMainItemsHeardLeft--geis {
			span {
				color: #000 !important;
			}
		}

		.myPages__swperMainItemsHeardLeft {
			display: flex;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			span {
				height: 40rpx;
				font-size: 28rpx;
				font-family: 'DIN';
				font-weight: 500;
				line-height: 40rpx;
				color: #B0B1BB;
				margin-left: 6rpx;
			}
		}

		.tabs {
			position: fixed;
			left: 0;
			width: 100%;
			height: 102rpx;
			background-color: #fff;
			border-radius: 0px 0px 40rpx 40rpx;
			display: flex;
			padding: 0 32rpx;
			box-sizing: border-box;
			justify-content: space-between;
			z-index: 1;
		}

		.tabsItems {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.tab_hen {
			width: 32rpx;
			height: 6rpx;
			background: transparent;
			opacity: 1;
			border-radius: 4rpx;
			margin: 8rpx auto;
		}

		.tab_hen--active {
			background: #F0414D !important;
		}

		.tab {
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: 400;
			color: #7B7D8D;
			text-align: center;
		}

		.active {
			font-weight: 550 !important;
			color: #000 !important;
		}
	}
</style>
